<template xmlns="">
  <div class="background">
    <titleComponent :originName="'basePanel'" :title="'基础数据看板'"></titleComponent>
    <div class="content">
      <div class="content_info">
        <div class="yz-select-server">
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item, index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{ item.name }}</div>
              <div v-else class="yz-box-item-text">{{ item.name }}</div>
            </div>
          </div>
          <div class="yz-box-items">

          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'面积'" />
          <div class="yz-content-bg" style="padding: 0 30px">
            <div class="yz-table">
              <div class="yz-tr bg-none">
                <div class="yz-td">
                  <div class="yz-td-label">总占地面积</div>
                  <div class="yz-td-text">{{ mjInfo.zzdmj}}m²</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">建筑面积</div>
                  <div class="yz-td-text">{{ mjInfo.jzmj}}m²</div>
                </div>
              </div>
              <div class="yz-tr">
                <div class="yz-td">
                  <div class="yz-td-label">餐饮面积</div>
                  <div class="yz-td-text">{{ mjInfo.cymj}}m²</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">超市面积</div>
                  <div class="yz-td-text">{{ mjInfo.csmj}}m²</div>
                </div>
              </div>
              <div class="yz-tr">
                <div class="yz-td">
                  <div class="yz-td-label">加油站面积</div>
                  <div class="yz-td-text">{{ mjInfo.jyzmj}}m²</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">充电站面积</div>
                  <div class="yz-td-text">{{ mjInfo.cdzmj}}m²</div>
                </div>
              </div>
              <div class="yz-tr">
                <div class="yz-td">
                  <div class="yz-td-label">停车场面积</div>
                  <div class="yz-td-text">{{ mjInfo.tccmj}}m²</div>
                </div>
                <div class="yz-td">
                  <div class="yz-td-label">绿化面积</div>
                  <div class="yz-td-text">{{ mjInfo.lhmj}}m²</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'车位'" />
          <div class="yz-content-bg">
            <div class="yz-sm">
              <div class="yz-sm-md">
                <div class="yz-sm-md3" v-for="(item,index) in cwInfoes">
                  <div class="a1">
                    <div class="a1-img">
                      <img :src="item.icon" alt="" />
                    </div>
                    <div class="a1-r">
                      <div class="a1-r-text tc b">{{item.num}}</div>
                      <div class="a1-r-text tc">{{item.title}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'业态覆盖量'" />
          <div class="yz-content-bg">
            <div class="yz-sm">
              <div class="yz-sm-md">
                <div class="yz-sm-md3" v-for="(item,index) in ytfgls">
                  <div class="a1">
                    <div class="a1-img">
                      <img :src="item.icon" alt="" />
                    </div>
                    <div class="a1-r">
                      <div class="a1-r-text tr b b2">{{item.num}}<span class="unit">个</span></div>
                      <div class="a1-r-text tc">{{item.title}}<span class="rate">{{item.rate}}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="btn-items">
          <div v-for="(row,index) in btnItems" :class="{'btn-item': true,'btn-item-selected': row.selected}"  @click="btnItemClick(index)">
            <span class="btn-item-text">{{row.title}}</span>
          </div>
        </div>
        <!-- 地图数据 -->
        <Map-traffic :data="mapData.data" :showLabel="mapData.showLabel" :parenHandler="parenHandler" :tipInfo="mapTipInfo" :showLegend="true"></Map-traffic>

      </div>
      <div class="content_info">
        <div style="height: 53px"></div>
        <div class="content_info_item">
          <contentTitle :title="'服务功能'" />
          <div class="yz-content-bg">
            <div class="yz-sm">
              <div class="yz-sm-md">
                <div class="yz-sm-md3">
                  <div class="a1">
                    <div class="a1-img">
                      <img src="../assets/img/basePanel2/service-function.png" alt="" />
                    </div>
                  </div>
                </div>
                <div class="yz-sm-md3">
                  <div class="a1">
                    <div class="a1-r a1-r0">
                      <div class="a1-r-text tr b green f24">{{fwgnInfo.cdz}}个</div>
                      <div class="a1-r-text tc f20">充电站</div>
                    </div>
                  </div>
                </div>
                <div class="yz-sm-md3">
                  <div class="a1">
                    <div class="a1-r a1-r0">
                      <div class="a1-r-text tc b green f24">{{fwgnInfo.cdzhuang}}个</div>
                      <div class="a1-r-text tc f20">充电桩</div>
                    </div>
                  </div>
                </div>
                <div class="yz-sm-md3">
                  <div class="a1">
                    <div class="a1-r a1-r0">
                      <div class="a1-r-text tc b green f24">{{fwgnInfo.cdq}}个</div>
                      <div class="a1-r-text tc f20">充电枪</div>
                    </div>
                  </div>
                </div>
                <div class="yz-sm-md3">
                  <div class="a1">
                    <div class="a1-r a1-r0">
                      <div class="a1-r-text tc b green f24">{{fwgnInfo.hdz}}个</div>
                      <div class="a1-r-text tc f20">换电站</div>
                    </div>
                  </div>
                </div>
                <div class="yz-sm-md3">
                  <div class="a1">
                    <div class="a1-r a1-r0">
                      <div class="a1-r-text tc b green f24">{{fwgnInfo.khdc}}个</div>
                      <div class="a1-r-text tc f20">可换电池</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'停车位占用(接入服务区数量:8对)'" />
          <div class="yz-content-bg">
            <div class="tc">
              <div class="tc-l">
                <div class="tc-chart" ref="zcwRef"></div>
              </div>
              <div class="tc-r">
                <div class="b2" v-for="(item,index) in zcwColor">
                    <div class="b2-point">
                      <div :style="{background: item}"></div>
                    </div>
                    <div class="b2-l">
                      <div class="b2-content">
                        <div class="b2-text" :style="{color:item}">{{ zcwKyValues[index]}}</div>
                        <div class="b2-text-r">
                          <div class="r">{{(zcwKyValues[index]==0)? 0 : parseFloat(zcwKyValues[index]*100/zcwValues[index]).toFixed(2)}}%</div>
                          <div class="w">可用</div>
                        </div>
                      </div>
                      <div class="b2-remark">
                        {{zcwNames[index]}}：{{zcwValues[index]}}个
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'公厕信息(接入服务区数量:8对)'" />
          <div class="yz-content-bg">
            <div class="yz-cc">
              <div class="yz-cc-md6">
                <div class="yz-cc-md6-bg yz-cc-md6-bg2">
                  <div class="yz-cc-grid">
                    <div class="yz-cc-grid-a1">今日客流:<span class="span">{{gcxx.man_jrkl}} 次</span></div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p1">
                        <div class="yz-cc-md6-p2-text">{{gcxx.man_kqzl}}</div>
                        <div class="yz-cc-md6-p2-text2">空气质量</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{gcxx.man_wd}}℃</div>
                        <div class="yz-cc-md6-p2-text2">温度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{gcxx.man_sd}}%</div>
                        <div class="yz-cc-md6-p2-text2">湿度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{gcxx.man_cwnd}}mg/m³</div>
                        <div class="yz-cc-md6-p2-text2">气味浓度</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="yz-cc-md6">
                <div class="yz-cc-md6-bg">
                  <div class="yz-cc-grid">
                    <div class="yz-cc-grid-a1">今日客流:<span class="span">{{gcxx.women_jrkl}} 次</span></div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p1">
                        <div class="yz-cc-md6-p2-text">{{gcxx.women_kqzl}}</div>
                        <div class="yz-cc-md6-p2-text2">空气质量</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{gcxx.women_wd}}℃</div>
                        <div class="yz-cc-md6-p2-text2">温度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{gcxx.women_sd}}%</div>
                        <div class="yz-cc-md6-p2-text2">湿度</div>
                      </div>
                    </div>
                    <div class="yz-cc-grid-md6">
                      <div class="yz-cc-md6-p2">
                        <div class="yz-cc-md6-p2-text">{{gcxx.women_cwnd}}mg/m³</div>
                        <div class="yz-cc-md6-p2-text2">气味浓度</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <bottom-menu></bottom-menu>

</template>
<script setup>
import './../assets/content.css'
import './../assets/common.css'
import titleComponent from "./components/title.vue";
import { getCurrentInstance, watch, onMounted,onUnmounted, ref, reactive } from "vue";
import ContentTitle from "./components/contentTitle.vue";
import {CountTo} from "vue3-count-to";
import MapTraffic from "./components/mapTraffic.vue";

import black_yellow_light from '../assets/img/basePanel2/black_yellow_light.png';
import black_yellow_gray from '../assets/img/basePanel2/black_gray.png';
import black_green_light from '../assets/img/basePanel2/black_green_light.png';
import black_green_gray from '../assets/img/basePanel2/black_gray.png';
import black_red_light from '../assets/img/basePanel2/black_red_light.png';
import black_red_gray from '../assets/img/basePanel2/black_gray.png';


import black_grey from '../assets/img/yztraffic/2.png';

import {drawLine} from "../util/chartUtil.js";
import {ajaxRequest} from "../api/code.js";
import bottomMenu from './components/bottomMenu.vue';

const chart = getCurrentInstance().proxy.$echarts
const isNumeric = function (value){
  value = parseInt(value);
  return typeof value === 'number' && !isNaN(value);
}

const areacode = ref(null)// 初始化地图数据
let timer = null
// 刷新页面数据
watch([areacode],(newVal, oldVal) => {
   if (timer) clearInterval(timer)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

const btnItems = ref([
  {
    title: '加油',
    selected: false
  },
  {
    title: '加气',
    selected: false
  },
  {
    title: '加氢',
    selected: false
  },
  {
    title: '餐饮',
    selected: false
  },
  {
    title: '商超',
    selected: false
  },
  {
    title: '汽修',
    selected: false
  },
  {
    title: '充电',
    selected: false
  },
  {
    title: '换电',
    selected: false
  },
  {
    title: '客房',
    selected: false
  },
  {
    title: '司机之家',
    selected: false
  }
])

const btnitemSelectedFlag = ref({index:null,selected:false});

const btntypeindex = ref(null)// 初始化地图数据

const btnItemClick = function (selectIndex) {
  
  debugger;

  btnItems.value.forEach((row, index) => {
      if(index === selectIndex){
        if(btnitemSelectedFlag.value.index == index){
          row.selected = !btnitemSelectedFlag.value.selected;
        }else{
          row.selected = true;
        }
       
        btnitemSelectedFlag.value = {index:selectIndex,selected:row.selected}
      }else{
        row.selected = false;
      }      
  });

  if (selectIndex === 0) {
    btntypeindex.value = 'jy'
  }
  else if (selectIndex === 1) {
    btntypeindex.value = 'jq'
  }
  else if (selectIndex === 2) {
    btntypeindex.value = 'jqin'
  }
  else if (selectIndex === 3) {
    btntypeindex.value = 'cy'
  }
  else if (selectIndex === 4) {
    btntypeindex.value = 'sc'
  }
  else if (selectIndex === 5) {
    btntypeindex.value = 'qx'
  }
  else if (selectIndex === 6) {
    btntypeindex.value = 'cd'
  }
  else if (selectIndex === 7) {
    btntypeindex.value = 'hd'
  }
  else if (selectIndex === 8) {
    btntypeindex.value = 'kf'
  }
  else if (selectIndex === 9) {
    btntypeindex.value = 'sjzj'
  }

  if(btnitemSelectedFlag.value.selected == false ){
    btntypeindex.value = null
  }




  //刷新地图数据
  initMap()
}


//ab选择
const abItems = ref([{
  name: "综合",
  selected: true
}, {
  name: "东(南)",
  selected: false
}, {
  name: "西(北)",
  selected: false
}]);


// const areaid = ref(0)


const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if (selectIndex === 0) {
    // areaid.value = null
    areacode.value = null
  }
  else if (selectIndex === 1) {
    // areaid.value = 1177350;
    areacode.value = '01'
  }
  else if (selectIndex === 2) {
    // areaid.value = 1177351;
    areacode.value = '02'
  }
  initMap()
  //切换分区刷新数据
  refreshData()
}

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: 349,
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])


 getFwqxx();

const curServer = ref(null)

//地图选中服务区
const parenHandler = function (item) {
  curServer.value=['河北高速燕赵驿行集团有限公司',item.compid]
  //刷新数据
  refreshData()
}

curServer.value=['河北高速燕赵驿行集团有限公司',null];

//选中服务区
const serverHandleChange = (selectItem) => {
   debugger;
  console.log(selectItem);
  curServer.value = selectItem;
  initMap()
  refreshData();
}

const klOptions = ref({
  carFlowText: "今日客流",
  klNum: "0"
})

const mjInfo = ref({
  zzdmj: "0",
  jzmj: "0㎡",
  cymj: "0㎡",
  csmj: "0㎡",
  jyzmj: "0㎡",
  cdzmj: "0㎡",
  tccmj: "0㎡",
  lhmj: "0㎡"
})


const fwgnInfo = ref({
  cdz : 0,
  cdzhuang:0,
  cdq : 0,
  hdz : 0,
  khdc : 0
})

const gcxx = ref({
  man_jrkl :0,
  man_kqzl :'良',
  man_wd : 0,
  man_sd : 0,
  man_cwnd : 0,

  women_jrkl :0,
  women_kqzl :'良',
  women_wd : 0,
  women_sd : 0,
  women_cwnd : 0

})

import dxhcw from "../assets/img/basePanel2/big-truck.png"
import pthcw from "../assets/img/basePanel2/goods-train.png"
import dxkcw from "../assets/img/basePanel2/bus.png"
import xxkcw from "../assets/img/basePanel2/passenger-car.png"
import nxtcw from "../assets/img/basePanel2/female.png"
import wzacw from "../assets/img/basePanel2/accessibility.png"
import whpcw from "../assets/img/basePanel2/hazardous-chemicals.png"
import sccw from "../assets/img/basePanel2/livestock.png"
import cdtcw from "../assets/img/basePanel2/accessibility.png"


const cwInfoes = ref([
  {
    icon: dxhcw,
    title: "大型货车位",
    num: 0
  },{
    icon: pthcw,
    title: "普通货车位",
    num: 0
  },{
    icon: dxkcw,
    title: "大型客车位",
    num: 0
  },{
    icon: xxkcw,
    title: "小型客车位",
    num: 0
  },{
    icon: nxtcw,
    title: "女性停车位",
    num: 0
  },{
    icon: wzacw,
    title: "无障碍车位",
    num: 0
  },{
    icon: whpcw,
    title: "危化品车位",
    num: 0
  },{
    icon: sccw,
    title: "牲畜车位",
    num: 0
  },{
    icon: cdtcw,
    title: "充电停车位",
    num: 0
  },
])

import catering from "../assets/img/basePanel2/catering.png"
import supermarket from "../assets/img/basePanel2/supermarket.png"
import comeon from "../assets/img/basePanel2/come-on.png"
import aerate from "../assets/img/basePanel2/aerate.png"
import hydrogenation from "../assets/img/basePanel2/hydrogenation.png"
import charge from "../assets/img/basePanel2/charge.png"
import replace from "../assets/img/basePanel2/replace-the-battery.png"
import repair from "../assets/img/basePanel2/auto-repair.png"
import guest from "../assets/img/basePanel2/guest-room.png"

const ytfgls = ref([
  {
    icon: catering,
    title: "餐饮",
    num: 0,
    rate: '0%'
  },{
    icon: supermarket,
    title: "商超",
    num: 0,
    rate: '0%'
  },{
    icon: comeon,
    title: "加油",
    num: 0,
    rate: '0%'
  },{
    icon: aerate,
    title: "加气",
    num: 0,
    rate: '0%'
  },{
    icon: hydrogenation,
    title: "加氢",
    num: 0,
    rate: '0%'
  },{
    icon: charge,
    title: "充电",
    num: 0,
    rate: '0%'
  },{
    icon: replace,
    title: "换电",
    num: 0,
    rate: '0%'
  },{
    icon: repair,
    title: "汽修",
    num: 0,
    rate: '0%'
  },{
    icon: guest,
    title: "客房",
    num: 0,
    rate: '0%'
  },
])

//// 停车位占用
const zcwRef = ref();
const zcwNames = ref(['小车位', '充电位', '大车位'])
const zcwColor = ref(['#00D1C8', '#23BE72', '#F9DA4F']);
const zcwValues = ref([0, 0, 0]);
const zcwKyValues = ref([0, 0, 0]);
const max = ref(0);

const zcwOpts = ref({
  color: zcwColor.value,
  tooltip: {
    trigger: 'item',
    formatter: "{b} : {c} ({d}%)"
  },
  title: {
    text: '{a|' + max.value + '}\n{c|' + '总车位' + '}',
    x: '35%',
    y: 'center',
    textStyle: {
      rich: {
        a: {
          width:0,
          fontSize: 30,
          color: '#FFF',
          padding: [9, 20],
          align:'center'
        },
        c: {
          width:0,
          fontSize: 16,
          color: '#FFF',
          padding: [9, 20],
          align:'center'
        },
      },
    },
  },
  series: [
    {

      type: 'pie',
      center: ['43%', '45%'],//左右 高低
      radius: ['50%', '60%'],
      label: {
        show: false,
      },
      data: [
        {
          value: zcwValues.value[0],
          name: zcwNames.value[0]
        },
        {
          value: zcwValues.value[1],
          name: zcwNames.value[1]
        },
        {
          value: zcwValues.value[2],
          name: zcwNames.value[2]
        }
      ],
    }
  ],
})


const toiletMonitor = ref({
  women_wd: 0,
  women_sd: 0,
  women_cwnd: 0,
  man_wd: 0,
  man_sd: 0,
  man_cwnd : 0
})


/**
 * 用于汇总地图上各类信息的值
 */
const mapTipInfo = ref({
  qyzhl : 0,
  tsztl : 0,
  jcbzl : 0
})

/****************************地图相关代码start************************************* */
/**初始化地图数据**/
const mapData = ref({
      showLabel: false,
      data : [
        {
          title: "承德东服务区（南北区）",
          lng: 118.192523,
          lag: 41.055226,
          //item: 1,
          symbol: black_yellow_light,
          label: '拥堵'
        },
        {
          title: "丰润停车区（南北区）",
          lng: 118.190801,
          lag: 39.802433,
          // item: 11234,
          symbol: black_red_light,
          label: '繁忙'
        },
        {
          title: "安子岭服务区（南北区）",
          lng: 117.483534,
          lag: 40.853385,
          // item: 1134,
          symbol: black_green_light,
          label: '空闲'
        },
        {
          title: "滦州服务区（南北区）",
          lng: 118.413204,
          lag: 39.852281,
          // item: 1134,
          symbol: black_green_light,
          label: '空闲'
        }
        ,
        {
          title: "山海关服务区（南北区）",
          lng: 119.762079,
          lag: 40.031636,
          // item: 1134,
          symbol: black_green_light,
          label: '空闲'
        }
        ,
        {
          title: "卢龙服务区（南北区）",
          lng: 118.904135,
          lag: 39.923276,
          // item: 1134,
          symbol: black_green_light,
          label: '空闲'
        }
      ]
    }
)
async function initMap() {
  const params = {
    //compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getCompDatas', params)
  if (res.data && res.data.length > 0) {

    mapTipInfo.value = {
      qyzhl : 0,
      tsztl : 0,
      jcbzl : 0
    };

    debugger;

    //mapData.value.data=[]
    res.data.forEach((item,index) => {
      let symb
      

      if (item.comptypename == '区域综合类') {
        mapTipInfo.value.qyzhl++;

        symb = black_yellow_gray;
        if(btntypeindex.value == null || getCurrentTypeFlag(item,btntypeindex.value)){
          symb = black_red_light;
        }


      } else if (item.comptypename == '特色主题类') {
        mapTipInfo.value.tsztl++;
        symb = black_red_gray;
        if(btntypeindex.value == null || getCurrentTypeFlag(item,btntypeindex.value)){
          symb = black_yellow_light;
        }

      } else if (item.comptypename == '基础保障类') {
    
        mapTipInfo.value.jcbzl++;
        symb = black_green_gray;
        if(btntypeindex.value == null || getCurrentTypeFlag(item,btntypeindex.value)){
          symb = black_green_light;
        }
      }

      
      mapData.value.data[index] = {
        compid:item.id,
        title : item.compname,
        lng : item.longitude,
        lag : item.latitude,
        symbol :   symb,
        label : item.comptypename,
        compid : item.compid,
      };
    })
  }

};

function getCurrentTypeFlag(item,btntype){
  if(btntype=="jy"){
     return item.jy >0? true:false;
  }else if(btntype=="jq"){
     return item.jq >0? true:false;
  }else if(btntype=="jqin"){
     return item.jqin >0? true:false;
  }else if(btntype=="cy"){
     return item.cy >0? true:false;
  }else if(btntype=="sc"){
     return item.sc >0? true:false;
  }else if(btntype=="qx"){
     return item.qx >0? true:false;
  }else if(btntype=="cd"){
     return item.cd >0? true:false;
  }else if(btntype=="hd"){
     return item.hd >0? true:false;
  }else if(btntype=="kf"){
     return item.kf >0? true:false;
  }else if(btntype=="sjzj"){
     return item.sjzj >0? true:false;
  }
}

let  zcwChart;

onMounted(()=>{
  zcwChart = drawLine(zcwRef.value,zcwOpts.value)
  initMap()
  //刷新数据
  refreshData();
})

// 加载数据
const refreshData = () => {
  // debugger;
  getTodayCustomer();
  getFwqMJ();
  getFwqFunction();
  getCw();
  getParkInfo();
  getModeTypeInfo();
  getToiletInfo();
  autoRefreshData();
}

// 1分钟刷新
const autoRefreshData = () => {
  timer = setInterval(async () => {
    getTodayCustomer();
    getFwqMJ();
    getFwqFunction();
    getCw();
    getParkInfo();
    getModeTypeInfo();
    getToiletInfo();
  }, 60*1000)
}


/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}

/**
 * 今日客流
 */
 async function getTodayCustomer() {
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getTodayCustomer', params);

  if (res.data) {
    klOptions.value.klNum = res.data.jrkl + "";
  }
}

/**
 * 面积
 */
 async function getFwqMJ() {
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getFwqMJ', params);

  if (res.data) {
    mjInfo.value.zzdmj = res.data.zzdmj;
    mjInfo.value.jzmj = res.data.jzmj;
    mjInfo.value.cymj = res.data.cymj;
    mjInfo.value.csmj = res.data.csmj;
    mjInfo.value.jyzmj = res.data.jyzmj;
    mjInfo.value.cdzmj = res.data.cdzmj;
    mjInfo.value.tccmj = res.data.tccmj;
    mjInfo.value.lhmj = res.data.lhmj;
  }
}

/**
 * 服务功能
 */
 async function getFwqFunction() {
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getFwqFunction', params);

  if (res.data) {
    fwgnInfo.value.cdz = res.data.cdzhansl;
    fwgnInfo.value.cdzhuang = res.data.cdzsl;
    fwgnInfo.value.cdq = res.data.cdqsl;
    fwgnInfo.value.hdz = res.data.hdzsl;
    fwgnInfo.value.khdc = res.data.khdcsl;
  }
}

/**
 * 车位
 */
 async function getCw() {
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getCw', params);
  for(var i=0; i<8; i++){
    cwInfoes.value[i].num = 0;
  }

  if (res.data) {
    cwInfoes.value[0].num = res.data.dxhcw;
    cwInfoes.value[1].num = res.data.pthcw;
    cwInfoes.value[2].num = res.data.dxkcw;
    cwInfoes.value[3].num = res.data.xxkcw;
    cwInfoes.value[4].num = res.data.nxtcw;
    cwInfoes.value[5].num = res.data.wzacw;
    cwInfoes.value[6].num = res.data.whpcw;
    cwInfoes.value[7].num = res.data.sccw;
    cwInfoes.value[8].num = res.data.cdtcw;
  }
}


/**
 * 停车位占用
 */
 async function getParkInfo() {
  const params = {
    compid:curServer.value?curServer.value[1]:null,
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getParkInfo', params);

  // debugger;
  if (res.data) {
    zcwOpts.value.series[0].data = [];
    zcwValues.value[0] = res.data.xcw;
    zcwKyValues.value[0] = res.data.xcwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[0],name: zcwNames.value[0]})

    zcwValues.value[1] = res.data.cdw;
    zcwKyValues.value[1] = res.data.cdwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[1],name: zcwNames.value[1]})

    zcwValues.value[2] = res.data.dcw;
    zcwKyValues.value[2] = res.data.dcwky;
    zcwOpts.value.series[0].data.push({value: zcwValues.value[2],name: zcwNames.value[2]})

    max.value = res.data.zcw;
    zcwOpts.value.title.text = '{a|' + max.value + '}\n{c|' + '总车位' + '}';
    zcwChart.setOption(zcwOpts.value);
  }
}


/**
 *  业态覆盖率
 */
 async function getModeTypeInfo() {
    const params = {
      compid:curServer.value?curServer.value[1]:null,
      areacode: areacode.value
    }
    const res = await ajaxRequest('post', 'getModeTypeInfo', params);

    if (res.data) {
      ytfgls.value[0].num = res.data.cy;
      ytfgls.value[0].rate = res.data.cyzb + "%";
      ytfgls.value[1].num = res.data.sc;
      ytfgls.value[1].rate = res.data.sczb + "%";
      ytfgls.value[2].num = res.data.jy;
      ytfgls.value[2].rate = res.data.jyzb + "%";

      ytfgls.value[3].num = res.data.jq;
      ytfgls.value[3].rate = res.data.jqzb + "%";
      ytfgls.value[4].num = res.data.jqing;
      ytfgls.value[4].rate = res.data.jqingzb + "%";
      ytfgls.value[5].num = res.data.cd;
      ytfgls.value[5].rate = res.data.cdzb + "%";

      ytfgls.value[6].num = res.data.hd;
      ytfgls.value[6].rate = res.data.hdzb + "%";
      ytfgls.value[7].num = res.data.qx;
      ytfgls.value[7].rate = res.data.qxzb + "%";
      ytfgls.value[8].num = res.data.kf;
      ytfgls.value[8].rate = res.data.kfzb + "%";
    }
 }

/**
 * 公厕信息
 */
 async function getToiletInfo() {
  const params = {
    compid:curServer.value&&curServer.value[1]==null?1190643:curServer.value== undefined?1190643:curServer.value[1],
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getToiletInfo', params);

  if (res.data) {
    gcxx.value.man_jrkl = res.data.man_jrkl;
    gcxx.value.man_kqzl = res.data.man_kqzl;
    gcxx.value.man_wd = res.data.man_wd;
    gcxx.value.man_sd = res.data.man_sd;
    gcxx.value.man_cwnd = res.data.man_cwnd;

    gcxx.value.women_jrkl = res.data.women_jrkl;
    gcxx.value.women_kqzl = res.data.women_kqzl;
    gcxx.value.women_wd = res.data.women_wd;
    gcxx.value.women_sd = res.data.women_sd;
    gcxx.value.women_cwnd = res.data.women_cwnd;
  }
}

</script>
<style scoped>
.yz-table{
  display: flex;
  flex-wrap: wrap;
  .yz-tr{
    background: url("../assets/img/basePanel/bg.png") no-repeat;
    display: flex;
    width: 100%;
    background-size: cover;
    .yz-td{
      width: 50%;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      justify-content: space-around;
      .yz-td-label{
        font-size: 16px;
        color: #02FFFB;
        letter-spacing: -0.28px;
        text-align: center;
        width: 100px;
      }
      .yz-td-text{

      }
    }
  }
  .bg-none{
    background: none;
  }
}
.yz-sm {
  width: 100%;

  .yz-sm-title {
    padding: 14px 0 2px 20px;
  }

  .yz-sm-md {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;

    .yz-sm-md3 {
      width: 33.333%;
      text-align: center;
      padding: 10px 0;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      justify-content: center;
      .yz-sm-md3-num {
        color: #66FFFF;
        font-size: 32px;
        padding-top: 8px;
      }

      .yz-sm-md3-text {
        padding-top: 6px;
        padding-bottom: 10px;
      }

      .yz-sm-md3-icon1 {
        height: 70px;
        background: url("../assets/img/basePanel/icon1.png") no-repeat center;
      }

      .yz-sm-md3-icon2 {
        background: url("../assets/img/basePanel/icon2.png") no-repeat center;
        height: 70px;
      }

      .yz-sm-md3-icon3 {
        background: url("../assets/img/basePanel/icon3.png") no-repeat center;
        height: 70px;
      }
    }
  }
}


.a1{
  display: flex;
  flex-direction: row;
  justify-content: center;
  .a1-img{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .a1-r{
    padding-left: 12px;
    .a1-r-text{
      font-size: 12px;
      line-height: 25px;
    }
    .tc{
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .tr{
      display: flex;
      justify-content: right;
    }
    .b{
      font-size: 15px;
      font-weight: bolder;
    }
    .b2{
      font-size: 20px;
    }
    .unit{
      font-size: 12px;
      padding-left: 4px;
      font-weight: normal;
    }
    .rate{
      color: #46BFCA;
      font-size: 11px;
      font-weight: bolder;
      padding-left: 4px;
    }
    .green{
      color: #66FFFF;
    }
    .f24{
      font-size: 22px;
    }
    .f20{
      font-size: 18px;
      padding-top: 5px;
    }
  }
  .a1-r0{
    padding-left: 0;
  }
}

.tc{
  display: flex;
  width: 100%;
  .tc-l{
    width: 60%;
  }
  .tc-chart{
    height: 250px;
  }
}

.yz-cc{
  display: flex;
  width: 100%;
  .yz-cc-md6{
    width: 260px;
    .yz-cc-md6-bg{
      background: url("../assets/img/basePanel/厕所监控女.png") no-repeat center;
      height: 240px;
      display: flex;
      flex-wrap: wrap;
      .yz-cc-grid{
        width: 148px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        padding: 50px 0 70px;
      }
      .yz-cc-grid-md6{
        width: 50%;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
      }
      .yz-cc-md6-p1{
        text-align: center;
        font-size: 20px;
        width: 100%;
      }
      .yz-cc-md6-p2{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
      }
      .yz-cc-md6-p2-text{
        color: #66FFFF;
        font-size: 18px;
        text-align: center;
      }
      .yz-cc-md6-p2-text2{
        font-size: 12px;
        text-align: center;
      }
    }
    .yz-cc-md6-bg2{
      background: url("../assets/img/basePanel/厕所监控男.png") no-repeat center;
    }
  }
}
.yz-cc-grid-a1{
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  .span{
    color: #1C91FD;
    padding-left: 2px;
    font-weight: bolder;
  }
}
.tc-r{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: -35px;
  padding: 35px 0px;
}
.b2{
  display: flex;
  .b2-l{
    display: flex;
    flex-direction: column;
  }
  .b2-point{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 50px;
    div{
      width: 10px;
      height: 10px;
      background: #cccccc;
      border-radius: 10px;
    }
  }
  .b2-remark{
    font-size: 14px;
  }
  .b2-content{
    display: flex;
    justify-content: space-between;
    .b2-text{
      font-size: 28px;
    }
    .b2-text-r{
      display: flex;
      flex-direction: column;
      padding-left: 6px;
      .r{
        font-size: 11px;
        color: #6DD400;
      }
      .w{
        font-size: 14px;
      }
    }
  }
}

.btn-items{
  display: flex;
  flex-wrap: wrap;

  .btn-item{
    width: 14.5%;
    display: flex;
    justify-content: center;
    box-shadow: inset 0 0 18px 1px rgba(0,255,255,0.59);
    height: 2.8vh;
    margin-left: 2.1vh;
    margin-top: 0.4vh;
    margin-right: 2.1vh;
    padding-top:0.4vh;
    padding-bottom: 0.8vh;
    font-size: 12px;
    cursor: pointer;
    .btn-item-text{

    }

  }
  .btn-item-selected{
    //box-shadow: inset 0 0 18px 1px rgb(53, 202, 155);
    //color: #35CB9C;
    background: rgb(53, 202, 155);
  }
}

</style>
